<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-11-26 14:29:56
 * @LastEditors: Seven
 * @LastEditTime: 2021-01-22 14:13:55
-->
<template>
    <div class="index-wrap">
        <div class="index-images">
            <img src="/images/index-top.png" alt="" />
        </div>
        <!-- 好课推荐 -->
        <div class="floor">
            <div class="containers">
                <floor-title
                    title="好课推荐"
                    subtitle="GOOD COURSE RECOMMENDATION"
                ></floor-title>
                <div class="floor-wrap">
                    <div class="teacher-wrap">
                        <el-row :gutter="gutter">
                            <el-col
                                :xs="12"
                                :sm="8"
                                :md="6"
                                :lg="6"
                                v-for="(item, index) in PopularCourses.slice(0,4)"
                                :key="index"
                            >
                                <course-box :data="item"></course-box>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
        <!-- 优秀教师 -->
        <div class="floor-teacher floor-s">
            <div class="containers">
                <floor-title
                    title="优秀教师"
                    subtitle="prominent teacher"
                    color="#fff"
                ></floor-title>
                <div class="floor-wrap">
                    <div class="teacher-wrap">
                        <el-row :gutter="gutter">
                            <el-col
                                :xs="12"
                                :sm="8"
                                :md="8"
                                v-for="(item, index) in teacherList.slice(0,3)"
                                :key="index"
                            >
                                <teacher-cards :data="item"></teacher-cards>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
        <!-- 学员成绩 -->
        <div class="floor-student floor-s">
            <div class="containers">
                <floor-title
                    title="学员成绩"
                    subtitle="STUDENT ACHIEVEMENT"
                ></floor-title>
                <div class="floor-wrap">
                    <el-row :gutter="gutter">
                        <el-col
                            :xs="12"
                            :sm="8"
                            :md="8"
                            v-for="(item, index) in student_achievement.slice(0,3)"
                            :key="index"
                        >
                            <student-box :data="item"></student-box>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <!-- 教师招聘 -->
        <div class="floor floor-recruitment">
            <div class="containers">
                <floor-title
                    title="教师招聘"
                    subtitle="TEACHER RECRUITMENT"
                ></floor-title>
                <div class="floor-wrap">
                    <div class="nav">
                        <div class="nav-title">
                            <div class="item">
                                <img src="/images/nav-region.png" alt="" />
                            </div>
                        </div>
                        <div class="nav-body">
                            <div
                                class="item"
                                :class="index === cityActive ? 'active' : ''"
                                v-for="(item, index) in cityList"
                                :key="index"
                                @click="select_city(index, item)"
                            >
                                {{ item.cityName }}
                            </div>
                        </div>
                    </div>

                    <div class="recruit-list">
                        <subject-list :list="_recruitList"></subject-list>
                    </div>
                    <el-pagination
                        :small="isSmall"
                        class="pagination"
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :pager-count="5"
                        :page-size.sync="pageSize"
                        @current-change="pageChange"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
        
        <div @click="qqq()">asdad</div>
    </div>
</template>

<script>
import { getRecruit } from "~/api";
import clientWidth from "~/mixin/clientWidth";
import axios from 'axios'
export default {
    mixins: [clientWidth],
    data() {
        return {
            swiperOption: {
                slidesPerView: 3,
                spaceBetween: 20,
                pagination: ".swiper-pagination",
                paginationClickable: true,
                nextButton: ".swiper-button-next",
                prevButton: ".swiper-button-prev",
                // Enable debugger
                debugger: true,
                loop: true,
            },
            // 好客推荐
            PopularCourses: [],
            // 优秀老师
            teacherList: [],
            // 地区导航
            cityList: [],
            cityActive: 0,
            // 招聘列表
            recruitList: [],
            // 学员成绩
            student_achievement: [],
            // 分页
            page: 1,
            pageSize: 10,
            total: 0,
        };
    },
    computed: {
        //地区id
        cityId() {
            return this.cityList[this.cityActive].cityId;
        },
        _recruitList() {
            return this.recruitList.map((item) => {
                return {
                    title: item.title,
                    url: "/recruit/" + item.id,
                    right: item.sourceTime,
                };
            });
        },
    },
    async asyncData({ app }) {
        // 优秀教师
        let teacherList_f = app.$axios
            .$get("/edu/teacher/teacherRecommend")
            .then((res) => {
                if (res.code === 0) {
                    return res.data;
                }
            });
        // 城市列表
        let cityList_f = app.$axios
            .$get(`/edu/sys/getCityList/430000`)
            .then((res) => {
                if (res.code === 0) {
                    res.data.unshift({
                        cityId: 0,
                        cityName: "全部",
                    });
                    return res.data;
                }
            });
        // 总页数
        let total = 0;
        // 招聘列表
        let recruitList_f = app.$axios
            .$get(`/edu/recruit/list/0`, {
                params: {
                    page: 1,
                    pageSize: 10,
                },
            })
            .then((res) => {
                if (res.code === 0) {
                    total = res.data.total;
                    return res.data.list;
                }else{
                    console.log(res)
                }
            }).catch(error=>{
                console.log(error)
            });
        // 好课推荐
        let PopularCourses_f = app.$axios
            .$get(`/edu/course/courseRecommend`)
            .then((res) => {
                if (res.code === 0) {
                    return res.data;
                }
            })
            .catch((error)=>{
                console.log(error)
            })
        // 学院成绩
        let student_achievement_f = app.$axios
            .$get(`/edu/student/studentRecommend`)
            .then((res) => {
                if (res.code === 0) {
                    return res.data;
                }
            });

        let teacherList = await teacherList_f;
        let cityList = await cityList_f;
        let recruitList = await recruitList_f;
        let PopularCourses = await PopularCourses_f;
        let student_achievement = await student_achievement_f;
        return {
            teacherList,
            cityList,
            //recruitList,
            PopularCourses,
            student_achievement,
            total,
        };
    },
    methods: {
        // 招聘 选择城市
        select_city(index, item) {
            this.cityActive = index;
            this.page = 0;
            this._getRecruit();
        },
        // 请求招聘列表
        _getRecruit() {
            getRecruit(this.cityId, this.page, this.pageSize).then((res) => {
                if (res.data.code === 0) {
                    this.recruitList = res.data.data.list;
                    this.total = res.data.data.total;
                }
            });
        },
        // 页数改变
        pageChange(page) {
            this.page = page;
            this._getRecruit();
        },
        qqq(){
            getRecruit(0,10).then((res) => {
                if (res.data.code === 0) {
                    this.recruitList = res.data.data.list;
                    this.total = res.data.data.total;
                }
            });
        }
    },
};
</script>
<style lang="scss" scoped>
.floor {
    padding: 50px 0 80px;
    background-color: #f5f6fb;
    .floor-wrap {
        margin-top: 40px;
    }
}
.floor-s {
    padding: 50px 0 40px;
    .floor-wrap {
        margin-top: 40px;
    }
}
.floor-teacher {
    background-color: #2a2b30;
}
.floor-student {
    background-color: #f5f6fb;
}
.floor-recruitment {
    background-color: #fff;
}
.pagination {
    margin-top: 20px;
}
// 招聘
.nav {
    display: flex;
    background-color: #fff;
    margin-top: 20px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 17px;
    margin-bottom: 25px;
    .nav-title {
        flex: 0 0 216px;
        .item {
            cursor: pointer;
            position: relative;
            img {
                width: 100%;
            }
            &.active::before {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-right: 14px solid #fff;
                border-bottom: 10px solid transparent;
                position: absolute;
                top: 25px;
                right: 0;
            }
        }
    }
    .nav-body {
        display: flex;
        flex-wrap: wrap;
        padding-left: 20px;
        margin-bottom: -10px;
        .item {
            height: 30px;
            line-height: 30px;
            color: #999999;
            font-size: 14px;
            border: 1px solid #dddddd;
            border-radius: 2px;
            margin: 0 10px 10px 0;
            padding: 0 10px;
            text-align: center;
            cursor: pointer;
            &:hover,
            &.active {
                color: #12bd96;
                border-color: #12bd96;
            }
        }
    }
}
@media screen and (max-width: 760px) {
    .nav {
        flex-direction: column;
    }
    .nav .nav-title {
        display: none;
    }
    .nav .nav-body{
        padding-left: 0;
        white-space: nowrap;
        display: block;
        overflow-x: auto;
        .item{
            display: inline-block;
        }
    }
    .floor {
        padding: 30px 0 30px;
        .floor-wrap {
            margin-top: 20px;
        }
    }
    .floor-s {
        padding: 30px 0 30px;
        .floor-wrap {
            margin-top: 20px;
        }
    }
}
</style>
